<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="../lib/jquery.min.js"></script>
</head>
<style>
	li{
		float: left;
		list-style: none;
		font-size: 30px;
		color: teal;
	}
</style>
<body>
	<ul>
		<li>☆</li>
		<li>☆</li>
		<li>☆</li>
		<li>☆</li>
		<li>☆</li>
		<li>☆</li>
		<li>☆</li>
	</ul>
</body>
<script>
	$(function(){
		$('li').on('mouseenter',function(){
			$(this).html('★').prevAll().html('★').end().nextAll().html('☆')
		});
		$('li').on('mouseleave',function(){
			$('li').html('☆')
			$(this).parent().find('li').html('☆').end().find('.sty').html('★').prevAll().html('★').end().nextAll().html('☆')
		}).on('click',function(){
		$(this).addClass('sty').siblings().removeClass()
		})
	})
</script>
</html>